<script setup lang="ts">
import { listProduct } from '@/api/product/product';
import { onMounted } from 'vue';
import { useVModel } from '@vueuse/core';
import { Delete } from '@element-plus/icons-vue';
import ParentAsinSelect from '@/components/ParentAsinSelect/index.vue';
import { ProductVO } from '@/api/product/product/types';

const props = defineProps<{
  modelValue?: string[] | number[] | undefined[];
  productType: string | number;
  multiple: boolean;
}>();
const emit = defineEmits(['update:modelValue']);
const value = useVModel(props, 'modelValue', emit);

const list = ref([]);
const init = async (params?: any) => {
  const _list = await listProduct(params);
  list.value = _list.data;
};
const add = () => {
  if (value.value) value.value.push(undefined);
  else value.value = [undefined];
};
const remove = (i) => {
  value.value.splice(i, 1);
};
onMounted(async () => {
  await init({ productType: '1' });
});

const callBack = (product?: ProductVO[]) => {
  if (!product || product.length === 0) {
    return;
  }
  // if (product && product.length > 0) {
  //   name.value = product.map((item) => item.asin).join(',');
  //   nextTick(() => {
  //     console.log('DOM updated with new name value:', name.value);
  //   });
  // }
  // data.value = product[0].asin;
  // name.value = product[0].productName;
};
</script>

<template>
  <div class="w-full bg-gray/10 rounded-1 pa-2">
    <div v-for="(_, i) in value" :key="i" class="flex mb-2">
      <parent-asin-select
        ref="parentAsinSelectRef"
        :product-type="productType"
        :multiple="multiple"
        @confirm-call-back="callBack"
      ></parent-asin-select>
      <el-select v-model="value[i]" v-bind="$attrs" placeholder="请选择产品" class="flex-1">
        <el-option v-for="_item in list" :key="_item.productId" :label="_item.productName" :value="_item.productId + ''"></el-option>
      </el-select>
      <el-button class="ml-2" color="red" plain @click="remove(i)">
        <el-icon class="mr-1">
          <Delete />
        </el-icon>
        删除
      </el-button>
    </div>
    <el-button class="w-full" color="green" plain @click="add">添加子产品</el-button>
  </div>
</template>

<style scoped lang="scss"></style>
